<template>
  <view class="home"
        @touchend='doubleClick'
  >
    <!-- 进度条 -->
    <view class="progress">
      <!-- 进度条组件 -->
      <!-- percent指完成进度  show-info指是否显示百分比 stroke-color指进度条颜色 -->
      <cmd-progress :percent="number/$store.state.questions.length*100" :show-info="false" stroke-color="#6ed90a"></cmd-progress>
    </view>
    <!-- 问题部分 -->
    <view class="questions" style="position: relative;">
      <swiper class="swiper" :current="this.now" :indicator-dots="false" duration="0" @change="getIndex">
        <!-- @change="isType(questions[current].type)" -->
        <swiper-item v-for="(item,index) in $store.state.questions">
          <!-- 题目序号与类型 -->
          <view class="numbers">
            {{(index+1)+"."}}
            <view class="types">
              {{item.type}}
            </view>
          </view>
          <!-- 题目内容 -->
          <view class="texts">
            <p v-html = "item.text"></p>
          </view>
          <!-- 题目分值 -->
          <view class="scores">
            分值：{{item.score}}分
          </view>
          <!-- 选择题选项样式 -->
          <view class="radioss" v-show="isChoice">
            <radio-group class="radios" @change="radioChange">
              <label v-for="(it,ind) in item.options" :key="it.value" class="rad">
                <view>
                  <radio class="radio" :value="it.value" :checked="ind === current" color="#007AFF" />
                </view>
                <p v-html="it.text"></p>
              </label>
              <view class="manswer">我的答案：{{questionMsg[index].stuAnswer}}</view>
              <view class="answer">正确答案：{{questionMsg[index].correctAnswer}}</view>
              <view class="answer">题目解析：{{questionMsg[index].analyze}}</view>
            </radio-group>
          </view>
<!--          判断题样式-->
          <view class="radioss" v-show="isJudege">
            <radio-group class="radios" >
              <label class="rad">
                <view>
                  <radio class="radio"  color="#007AFF" />
                </view>
                <view class="text">{{judgeChoice.right}}</view>
              </label>
              <label class="rad">
                <view>
                  <radio class="radio" color="#007AFF" />
                </view>
                <view class="text">{{judgeChoice.error}}</view>
              </label>
              <view class="manswer">我的答案：{{questionMsg[index].stuAnswer}}</view>
              <view class="answer">正确答案：{{questionMsg[index].correctAnswer}}</view>
              <view class="answer">题目解析：{{questionMsg[index].analyze}}</view>
            </radio-group>
          </view>
          <!-- 填空题样式 -->
          <view class="radioss" v-show="isGap">
            <radio-group>
            <!-- <textarea class="in" placeholder="请输入答案"></textarea> -->
            <view class="manswer">我的答案：{{questionMsg[index].stuAnswer}}</view>
            <view class="answer">正确答案：{{questionMsg[index].correctAnswer}}</view>
            <view class="answer">题目解析：{{questionMsg[index].analyze}}</view>
            </radio-group>
          </view>
          <!-- 简答题样式 -->
          <view class="radioss" v-show="isComprehensive">
            <view class="manswer">我的答案：{{questionMsg[index].stuAnswer}}</view>
            <view class="answer">正确答案：{{questionMsg[index].correctAnswer}}</view>
            <view class="answer">题目解析：{{questionMsg[index].analyze}}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 双击显示答题栏状况 -->
    <view class="profile"
          v-show="pop()">
      <circulate></circulate>
    </view>
  </view>
</template>

<script>
import {
  //getTestDDL,
  getQuestions
} from '../../api/file.js'
import circulate from "../../components/testDetail/testDetail-circulate.vue"
export default{
  data(){
    return{
      judgeChoice:{
        right:'√',
        error:'X'
      },
      token:uni.getStorageSync('token'),
      paperId:uni.getStorageSync('paperId'),
      //当前题号
      now:0,
      // 答题栏状态
      status:false,

      // 题目类型
      isChoice: true,
      isGap: false,
      isComprehensive: false,
      isJudege:false,
      // 选择题当前选择选项
      current: -1,
      // 选择题选项名
      alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
        'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
      ],
      number:0,
      questionMsg:[],
    }
  },
  components:{
    circulate
  },
  created(){
    this.questionMsg=this.$store.state.questionMsg;
    console.log("recordDetai页面的this.$store.state.questionMsg:",this.questionMsg);
    this.getQuestions();// 获取考试题目
  },
  onLoad(option){
    this.now=option.id;
	this.number=Number(this.now)+1;
	console.log("页面下标：",this.number)
  },
  methods:{
    //通过接口获取题目信息
    getQuestions() {
      this.$store.dispatch("getQuestions",{paperId:this.paperId,token:this.token});
      //console.log("this.$store.state.questions:",this.$store.state.questions);
    },
    getIndex(e) { //根据题目类型决定页面是否显现
      this.number = e.detail.current + 1;
      if (this.$store.state.questions[e.detail.current].type === "选择题") {
        this.isChoice = true;
        this.isGap = false;
        this.isComprehensive = false;
      } else if (this.$store.state.questions[e.detail.current].type === "填空题") {
        this.isChoice = false;
        this.isGap = true;
        this.isComprehensive = false;
      } else if (this.$store.state.questions[e.detail.current].type === "综合题") {
        this.isChoice = false;
        this.isGap = false;
        this.isComprehensive = true;
      }
    },
    // 选择题选项
    radioChange: function(evt) {
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
    },
    // 综合题拍照
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.src = res.tempImagePath
        }
      });
    },
    pop() {
      return this.status;
    },
    doubleClick(e){
      const _now = new Date().getTime()
      if (_now - this.touchStartTime <= 300) {
        if(this.status==false)
          this.status=true
        else
          this.status=false
        console.log('这是双击事件')
        console.log(this.status);
        console.log(this.flag);
      } else {
        this.touchStartTime = _now
      }
    }
  }
}
</script>

<style 	lang="scss">
/* 问题部分 */
.questions {
  top: -15rpx;
  margin: 15rpx;
  position: relative;
}
/*答题栏状态*/
.profile{
  position: absolute;
  bottom: 10rpx;
}

/* swiper */
.swiper {
  height: 1100rpx;
}

.numbers {
  display: flex;
  flex-direction: row;
}

.types {
  font-size: 30rpx;
  color: #5FADFF;
  border-radius: 10rpx;
  border-style: solid;
  border-width: 3rpx;
  border-color: #5FADFF;
}

.answer{
  color: #5FADFF;
  margin: 15rpx;
}

.manswer{
  margin: 15rpx;
}

.scores {
  color: #686868;
  background-color: #e1e1e1;
  width: 170rpx;
  margin: 10rpx;
  position: absolute;
  right: 0;
}

/* 选择题样式 */
.radioss {
  margin-top: 60rpx;
}

.radios {
  display: flex;
  flex-direction: column;
  margin: 15rpx;
}

// radio按钮大小
.radio {
  transform: scale(0.8);
}

.rad {
  margin-bottom: 25rpx;
  display: flex;
  flex-direction: row;
}

/* 填空题样式 */
.in {
  width: 90%;
  border-radius: 10rpx;
  border-style: solid;
  border-width: 3rpx;
  border-color: #595959;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

/* 综合题样式 */
.shoot {
  width: 80%;
  background-color: #03abff;
  color: white;
}
</style>
